<template>
  <transition enter-active-class="animated faster zoomIn" leave-active-class="animated faster zoomOut">
    <div class="useTip-wrap publicZIndexUseTip" v-if="useTipVisible">
        <img src="@/assets/image/useTip/bapinText.png" class="bapinTextIcon" />
        <img src="@/assets/image/useTip/getIt.png" class="getItIcon" v-tap="{ methods: getIt }" />
    </div>
  </transition>
</template>
<script>
import { mapState } from 'vuex';
import bgm from '@/assets/constant/audio';
import createjs from 'createjs-cmd';

export default {
  name: 'loading',
  computed: {
    ...mapState({
      useTipVisible: (state) => state.app.useTipVisible,
    }),
  },
  beforeDestroy() {},
  created() {
    this.loadAudioFile();
  },
  methods: {
    getIt() {
      this.playAudio();
      this.$store.commit('app/setUseTip', false);
    },
    // 加载音频文件
    loadAudioFile() {
      const loader = new createjs.LoadQueue(true);
      loader.installPlugin(createjs.Sound);
      loader.loadFile({ id: 'clickStep', src: bgm.clickStep });
      loader.on('complete', () => {
        console.log('音频加载成功');
      });
    },
    playAudio() {
      createjs.Sound.play('clickStep');
    },
  },
};
</script>

<style lang="less" scoped>
.useTip-wrap {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5);
 .bapinTextIcon {
   width: 516px;
   height: 226px;
   position: absolute;
   left: 116px;
   bottom: 800px;
 }
 .getItIcon {
   position: absolute;
   width: 298px;
   height: 104px;
   left: 226px;
   bottom: 254px;
 }
}
</style>
